<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<div id="demo">
	<!-- 
		表单数据绑定
	 -->
	<form action="/xxx" @submit.prevent="handleSubmit">
		<span>用户名：</span><input type="text" v-model="userName" /><br />
		<span>paswd: </span><input type="password" v-model="password" /><br />
		
		<span>性别：</span>
		<input type="radio" id="female" value="0" v-model="sex"><label for="female">女</label>
		<input type="radio" id="male" value="1" v-model="sex"><label for="male">男</label><br />
		
		<span>爱好：</span>
		<input type="checkbox" id="zuqiu" value="zuqiu" v-model="likes"><label for="zuqiu">足球</label>
		<input type="checkbox" id="lanqiu" value="lanqiu" v-model="likes"><label for="lanqiu">篮球</label>
		<input type="checkbox" id="ppq" value="ppq" v-model="likes"><label for="ppq">乒乓球</label>
		<input type="checkbox" id="ymq" value="ymq" v-model="likes"><label for="ymq">羽毛球</label><br />
		
		<span>城市：</span>
		<select v-model="selectCityId">
			<option disabled value="">请选择</option>
			<option :value="city.id" v-for="(city, index) in citys" :key=index>{{city.name}}</option>
		</select><br />
		
		<!-- 多选城市 -->
		<span>多选城市：</span>
		<select v-model="selectCityIds" multiple>
			<option disabled value="">请选择</option>
			<option :value="city.id" v-for="(city, index) in citys" :key=index>{{city.name}}</option>
		</select><br />
		
		<span>自我介绍：</span>
		
		<!-- 在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替 -->
		<textarea rows="5" v-model="desc"></textarea><br />
		
		<!-- <input type="submit" value="注册" /> -->
		<button>注册</button>
	</form>
</div>	
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	const vm = new Vue({
		el:'#demo',
		data:{
			userName:'',
			password:'',
			sex:0,
			likes:[],
			citys:[{id:1, name:'北京'}, {id:2, name:'上海'}, {id:3, name:'广东'}, {id:4, name:'深圳'}, {id:5, name:'杭州'}],
			selectCityId:'2', // 设置某个选项默认被选中,如果为空,则是请选择
			selectCityIds:[],
			desc:''
		},
		methods:{
			handleSubmit:function() {
				console.log(this.userName + this.password + this.sex + this.likes + "城市：" + this.selectCityId + this.desc + this.selectCityIds);
			}
		}
	});
</script>
</body>
</html>
